<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="120px" class="search">
        <el-row class="search-input">
          <el-form-item label="商户名称：">
            <el-input v-model="filters.merchantName" clearable placeholder="商户名称"></el-input>
          </el-form-item>
          <el-form-item label="商户code：">
            <el-input v-model="filters.merchantCode" clearable placeholder="商户code"></el-input>
          </el-form-item>
          <el-form-item label="订单编号：">
            <el-input v-model="filters.orderNo" clearable placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="第三方订单编号：">
            <el-input v-model="filters.parentOrderNo" clearable placeholder="第三方订单编号"></el-input>
          </el-form-item>
          <el-form-item label="订单类型：">
            <!--            <el-input v-model="filters.orderNo" clearable placeholder="订单编号"></el-input>-->
            <el-select v-model="filters.orderTypeB" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="积分订单" :value="1"></el-option>
              <el-option label="普通订单" :value="2"></el-option>
              <el-option label="分期订单" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源渠道：">
            <el-select v-model="filters.sources" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="APP" :value="1"></el-option>
              <el-option label="商品小程序" :value="2"></el-option>
              <el-option label="企业微信" :value="3"></el-option>
              <el-option label="We2000公众号" :value="4"></el-option>
              <el-option label="商城公众号" :value="5"></el-option>
              <el-option label="其他" :value="6"></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="活动来源：">-->
          <!--            <el-select v-model="filters.activitySource"  clearable placeholder="全部">-->
          <!--              <el-option label="全部" :value="0"></el-option>-->
          <!--              <el-option label="拼团" :value="1"></el-option>-->
          <!--              <el-option label="秒杀" :value="2"></el-option>-->
          <!--              <el-option label="预售" :value="3"></el-option>-->
          <!--              <el-option label="抽奖" :value="4"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="收货人：">
            <el-input v-model="filters.receiverName" clearable placeholder="收货人"></el-input>
          </el-form-item>
          <el-form-item label="收货人手机：">
            <el-input v-model="filters.consigneePhone" clearable placeholder="收货人手机"></el-input>
          </el-form-item>
          <el-form-item label="收货人地址：">
            <el-cascader v-model="filters.receiverAddress" clearable style="width:160px;"
                         :options="options"></el-cascader>
          </el-form-item>
          <el-form-item label="商品名称：">
            <el-input v-model="filters.goodsName" clearable placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品编码：">
            <el-input v-model="filters.commodityCode" clearable placeholder="商品编码"></el-input>
          </el-form-item>
          <el-form-item label="会员手机号：">
            <el-input v-model="filters.phoneNumber" clearable placeholder="会员手机号"></el-input>
          </el-form-item>
          <el-form-item label="运单编号：">
            <el-input v-model="filters.waybillNumber" clearable placeholder="运单编号"></el-input>
          </el-form-item>
          <el-form-item label="发货时间：">
            <el-date-picker v-model="filters.deliveryDate"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="支付方式：">
            <el-select v-model="filters.payment" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="微众分期" :value="1"></el-option>
              <el-option label="We2000" :value="2"></el-option>
              <el-option label="微信支付" :value="3"></el-option>
              <el-option label="微众银行储蓄卡" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否需要开发票：">
            <el-select v-model="filters.whetherInvoice" clearable placeholder="是">
              <el-option label="是" :value="0"></el-option>
              <el-option label="全部" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算状态：">
            <el-select v-model="filters.balanceSts" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="未清算" :value="1"></el-option>
              <el-option label="已清算" :value="2"></el-option>
              <el-option label="扎差中" :value="3"></el-option>
              <el-option label="已轧差" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单标签：">
            <el-select v-model="filters.orderTag" clearable placeholder="全部">
              <el-option label="全部" :value="1"></el-option>
              <el-option label="单买订单" :value="2"></el-option>
              <el-option label="购物车订单" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="购买方式：">
            <el-select v-model="filters.payType" clearable placeholder="全部">
              <el-option label="全部" :value="1"></el-option>
              <el-option label="邮寄" :value="2"></el-option>
              <el-option label="线下自提" :value="3"></el-option>
              <el-option label="微众银行储蓄卡" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间：">
            <el-date-picker v-model="filters.buyTime"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-row>

        <!-- 查询 重置部分 -->
        <el-row class="search-button">
          <el-col class="mb20">
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage()"/>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm()"/>
            <!--            <el-button type="primary" size="small" @click="addForm()">新增</el-button>-->

            <!--            <el-button type="primary" size="small" plain @click="handleBatchMarkProcessed()" :disabled="multipleSelection.length < 1">标记为已处理</el-button>-->
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mb20">
            <el-button type="primary" size="small" @click="handleQuery()">全部</el-button>
            <el-button type="primary" size="small" @click="handleQuery(0)">待提交</el-button>
            <el-button type="primary" size="small" @click="handleQuery(1)">待审核</el-button>
            <el-button type="primary" size="small" @click="handleQuery(2)">审核通过</el-button>
            <el-button type="primary" size="small" @click="handleQuery(3)">审核不通过</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--订单异常列表-->
    <el-table :data="pageResult"
              style="width: 100%"
              :stripe="true"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
              @selection-change="handleSelectionChange"
              :size="size"
              align="align">
      <el-table-column type="selection" :selectable="selectTable" width="50"></el-table-column>
      <el-table-column prop="abnormalOrderNo" label="异常订单编号" sortable width="200"></el-table-column>
      <el-table-column prop="merchantName" label="商户名称" sortable width="200"></el-table-column>
      <el-table-column prop="orderNo" label="订单编号" sortable width="200"></el-table-column>
      <el-table-column prop="orderTypeB" label="订单类型" sortable width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.orderTypeB == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.orderTypeB == 1" size="mini" type="primary">积分订单</span>
          <span v-if="scope.row.orderTypeB == 2" size="mini" type="primary">普通订单</span>
          <span v-if="scope.row.orderTypeB == 3" size="mini" type="primary">分期订单</span>
        </template>
      </el-table-column>
      <el-table-column prop="sources" label="来源渠道" sortable width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.sources == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.sources == 1" size="mini" type="primary">APP</span>
          <span v-if="scope.row.sources == 2" size="mini" type="primary">商品小程序</span>
          <span v-if="scope.row.sources == 3" size="mini" type="primary">企业微信</span>
          <span v-if="scope.row.sources == 4" size="mini" type="primary">We2000公众号</span>
          <span v-if="scope.row.sources == 5" size="mini" type="primary">商城公众号</span>
          <span v-if="scope.row.sources == 6" size="mini" type="primary">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderSources" label="订单来源" sortable width="200">

        <template slot-scope="scope">
          <span v-if="scope.row.orderSources == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.orderSources == 1" size="mini" type="primary">拼团</span>
          <span v-if="scope.row.orderSources == 2" size="mini" type="primary">秒杀</span>
          <span v-if="scope.row.orderSources == 3" size="mini" type="primary">预售</span>
          <span v-if="scope.row.orderSources == 3" size="mini" type="primary">抽奖</span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerUsername" label="下单操作账号" sortable width="200"></el-table-column>
      <el-table-column prop="receiverName" label="收货人" sortable width="200"></el-table-column>
      <el-table-column prop="consigneePhone" label="收货人手机" sortable width="200"></el-table-column>
      <el-table-column prop="receiverAddress" label="收货人地址" sortable width="200"></el-table-column>
      <el-table-column prop="buyTime" label="订单创建时间" sortable width="200"></el-table-column>
      <el-table-column prop="abnormalTime" label="异常发生时间" sortable width="200"></el-table-column>
      <el-table-column prop="reason" label="异常原因" sortable width="200"></el-table-column>
      <el-table-column prop="remarks" label="异常备注" sortable width="200"></el-table-column>
      <el-table-column prop="enclosure" label="异常附件" sortable width="200"></el-table-column>

      <el-table-column label="操作" fixed="right" sortable width="200">
        <template slot-scope="scope">
          <!--          <el-button v-if="scope.row.remarkStatus == 1" size="mini" type="primary" @click="handleMarkProcessed(scope.row)">标记为已处理</el-button>-->
          <!--          <el-button v-if="scope.row.remarkStatus == 2" size="mini" type="primary" @click="handleMarkPending(scope.row)">标记为待处理</el-button>-->
          <!--          <el-button type="primary" size="small" @click="Edit(scope.row)">编辑</el-button>-->
          <el-button type="primary" size="small" @click="review(scope.row)">审核</el-button>
          <el-button type="primary" size="small" @click="operationLog()">操作日志</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes"
                     @current-change="refreshPageRequest"
                     @size-change="handleSizeChange"
                     :current-page="pageRequest.pageNum"
                     :page-size="pageRequest.pageSize"
                     :total="totalSize"
                     style="float:right;"
                     :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>
    <el-dialog title="新增" width="80%" height="800px" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <AbnormalEventDetail></AbnormalEventDetail>
    </el-dialog>

    <!--编辑弹窗-->
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="80%">
      <div class="search-wrap">
        <el-form :inline="true" :model="editDataForm" ref="searchFilters" label-position="right" label-width="200px">
          <el-form-item label="订单编号">
            <el-input v-model="editDataForm.orderNo" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-input v-model="editDataForm.orderTypeB" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-input v-model="editDataForm.orderStatus" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <!--          -->
          <el-form-item label="销售商户">
            <el-input v-model="editDataForm.salesBusiness" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="来源中端">
            <el-input v-model="editDataForm.sources" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="来源渠道">
            <el-input v-model="editDataForm.sources" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="订单来源">
            <el-input v-model="editDataForm.orderSources" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <!--          -->
          <el-form-item label="商户类型">
            <el-input v-model="editDataForm.merchantName" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="editDataForm.buyTime" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="会员手机号">
            <el-input v-model="editDataForm.consigneePhone" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <!--          -->
          <el-form-item label="外部订单编号">
            <el-input v-model="editDataForm.externalOrderCode" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <!--          加-->
          <el-form-item label="订单异常状态">
            <el-input v-model="editDataForm.abnormalOrderStatus" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="支付状态">
            <el-input v-model="editDataForm.orderStatus" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-input v-model="editDataForm.payment" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="订单标签">
            <el-input v-model="editDataForm.orderTag" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="editDataForm.consigneePhone" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名">
            <el-input v-model="editDataForm.receiverName" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="收货人地址">
            <el-input v-model="editDataForm.receiverAddress" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="异常原因">
            <el-input type="textarea" style="width: 500px;" v-model="editDataForm.reason"></el-input>
          </el-form-item>
          <el-form-item label="审核结果">
            <!--            <el-input type="textarea" style="width: 500px;" v-model="editDataForm.review"></el-input>-->
            <el-select v-model="editDataForm.review" clearable placeholder="请选择审核状态">
              <el-option label="审核通过" :value="1"></el-option>
              <el-option label="审核不通过" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" style="width: 500px;" v-model="editDataForm.remarks"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="mini" @click="editDialogVisible = false">返 回</el-button>
        <el-button size="mini" @click="submitEdit()">保 存</el-button>
      </div>
    </el-dialog>


    <!--查看下级明细-->
    <el-dialog title="日志" :visible.sync="logDialogVisible" width="60%">
      <div class="table-wrap">
        <el-table :data="logTable" height="500px">
          <!--          <el-table-column align="center" prop="serialNumber" label="序号" width="180"/>-->
          <el-table-column align="center" prop="updateTime" label="操作时间" width="180"></el-table-column>
          <el-table-column align="center" prop="updaterName" label="操作人" width="180"></el-table-column>
          <el-table-column align="center" prop="operationContent" label="操作内容"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest"
                         @size-change="handleSizeChange" :current-page="pageRequest.pageNum"
                         :page-size="pageRequest.pageSize" :total="totalSize" style="float:right;"
                         :page-sizes="[10, 20, 30, 40]"></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="mini" @click="logDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'
  import citys from '../../../../static/json/Paje/citys'
  import AbnormalEventDetail from '@/views/Pages/OrderCenter/AbnormalEventDetail';


  export default {
    name: 'abnormalEvent',
    components: {
      KtButton,
      AbnormalEventDetail
    },
    data() {
      return {
        size: 'small',
        options: citys,
        editDialogVisible: false,
        dialogVisible: false,
        logDialogVisible: false,
        imgUpload: this.utils.imgUploadUrl,
        imgDataForm: [],
        picLimit: 1,
        picList: [],
        logTable:[],
        editDataForm:
          {
            orderNo: "",
            orderTypeB: "",
            orderStatus: "",
            salesBusiness: "",
            sources: "",
            orderSources: "",
            merchantName: "",
            buyTime: "",
            consigneePhone: "",
            externalOrderCode: "",
            abnormalOrderStatus: "",
            payment: "",
            orderTag: "",
            receiverName: "",
            receiverAddress: "",
            promotionType: "",
            reason: "",
            review: "",
            remarks: "",
          },
        filters: {
          merchantName: '',
          merchantCode: "",
          orderNo: "",
          parentOrderNo: "",
          orderTypeB: "",
          sources: "",
          receiverName: "",
          consigneePhone: "",
          receiverAddress: "",
          goodsName: "",
          commodityCode: "",
          phoneNumber: "",
          waybillNumber: "",
          deliveryDate: "",
          payment: "",
          whetherInvoice: "",
          balanceSts: "",
          orderTag: "",
          payType: "",
          buyTime: "",
        },
        receiverAddress: [],
        orderCreateTime: [],
        remarkTime: [],
        createTime: [],
        pageResult: [],
        totalSize: 0,
        pageRequest: {pageNum: 1, pageSize: 10},
        dataForm: {ids: [], remark: '', remarkStatus: 0},
        dataFormRules: {remark: [{required: true, message: '请输入处理备注', trigger: 'blur'}]},
        multipleSelection: [],
        updateParams: []
      }
    },
    mounted() {
      this.findPage()
    },
    methods: {
      findPage() {
        let this_ = this
        this_.filters.pageNum = this_.pageRequest.pageNum
        this_.filters.pageSize = this_.pageRequest.pageSize
        this.utils.request.findMAbnormalEventPage(this_.filters, function (res) {
          if (res.code == '0000') {
            this_.pageResult = res.data.list;
            this_.totalSize = res.data.total;
          } else {
            this_.pageResult = [];
            this_.totalSize = 0;
          }
        })
      },
      //审核
      review(params) {
        debugger
        let this_ = this;
        // params.id = this.$route.query.id;
        this_.editDialogVisible = true;
        let param = params.id;
        this.utils.request.findMAbnormalEventPage(param, function (res) {
          if (res.code === "0000") {
            // this_.editDataForm = res.data.list[0];
          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });
      },
      // 提交
      submitEdit() {
        let this_=this;
        this_.$confirm("确认提交吗？", "提示", {}).then(() => {
          debugger
          let params = {};
          params.selectionChangeList = this_.selectionChangeList[0];
          // params.imgDataForm=this_.imgDataForm;
          this.utils.request.saveMAbnormalEvent(params, function (res) {
            if (res.code === "0000") {
              this_.$message({message: "操作成功", type: "success"});
            } else {
              this_.$message({message: "操作失败", type: "error"});
            }
          });
        });

      },

      handleQuery:function(status){
        let this_ = this
        this_.filters.status = status;
        this_.findPage();
      },

      //删除
      deletes() {

      },
      //查看日志
      operationLog(params) {
        let this_ = this;
        this_.logDialogVisible = true;
        let param = params.id;
        this.utils.request.findMAbnormalEventPage(param, function (res) {
          if (res.code === "0000") {
            this_.logTable = res.data.list[0];
          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });
      },
      // logo上传
      handlePicSuccess: function (res, file) {
        if (res.code == "0000") {
          this.dataForm.pic = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList.push(imgUrl);
        }
      },
      //文件上传数量限制
      handleExceed: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件移除
      handlePicRemove(file, picList) {
        if (picList && picList.length == 0) {
          this.dataForm.pic = "";
        }
        this.picList = picList
      },

      // 每页数据刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      // 每页条数刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },
      // 复选框选择的值
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 禁用复选框
      selectTable(row, index) {
        if (row.remarkStatus == 1) {
          return true;
        } else if (row.remarkStatus == 2) {
          return false;
        }
      },
      // 清空
      resetForm() {
        this.filters = {};
        this.receiverAddress = [];
        this.orderCreateTime = [];
        this.remarkTime = [];
        this.createTime = [];
        this.findPage();
      }
    }
  };
</script>

<style scoped lang='scss'>
  /* 搜索样式重置 */
  .search /deep/ .el-form-item__content {
    width: 160px;
  }

  .search /deep/ .el-select {
    width: 160px !important;
  }

  .search /deep/ .el-date-editor.el-input__inner {
    width: 220px !important;
  }

  .search .manager /deep/ .el-form-item {
    width: 70px !important;
  }

  .clearfix {
    text-align: left;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .jiesuan {
    margin-left: 10px;
  }

  .el-tabs {
    margin-bottom: 20px;
  }

  .orderDetail {
    margin: 20px;
    font-size: 14px;
  }

  .el-col {
    border-radius: 4px;
    color: #58666e !important;
  }

  .bg-purple {
    text-align: left;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
  }

  .mb20 {
    margin-bottom: 20px;
  }
</style>
